@require nib
@require "~styl/base/palette.styl"

$dropdown-hover-color = darken($background-color, 2.5%)

.dropdown
  text-transform uppercase
  letter-spacing 2px
  line-height 17px
  padding 12px 24px
  vertical-align middle
  border 1px solid $button-border-color
  border-radius 4px
  display inline-flex
  white-space nowrap
  padding-right 10px
  color $body-color

  &:hover
    background-color $dropdown-hover-color

  &__title
    vertical-align middle
    display inline-block

  &__select
    display inline-block
    vertical-align middle

    &:hover
      background-color $dropdown-hover-color

  &__side-arrow
    font-family Lato-Bold
    display none
    color $link-color
    cursor pointer

    &:first-child
      border-right 1px solid $button-border-color
      padding 12px 24px
      border-top-left-radius 4px
      border-bottom-left-radius 4px

    &:last-child
      border-left 1px solid $button-border-color
      padding 12px 24px
      border-top-right-radius 4px
      border-bottom-right-radius 4px

    &--disabled
      background-color $table-border-color
      cursor auto

      polyline
        stroke $button-border-color

  &--side-arrows
    padding 0

    &:hover
      background-color transparent

    .dropdown__side-arrow
      display inline

      &:hover
        background-color $dropdown-hover-color

// NOTE: react-select styles can be found in styl/shame.styl
